
<link href="<{$res_url}>/css/wap/public.css" rel="stylesheet" type="text/css">
<link href="<{$res_url}>/css/wap/home.css" rel="stylesheet" type="text/css">
<link href="<{$res_url}>/css/wap/jquery.Jcrop.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<{$res_url}>/js/wap/jquery.min.js"></script>
<script type="text/javascript" src="<{$res_url}>/js/wap/jquery.Jcrop.js"></script>
<link href="<{$res_url}>/css/wap/demos.css" rel="stylesheet" type="text/css">
<!--<style type="text/css">
    body,html{background-color:#000;position:relative;width:100%;height:100%;overflow: hidden;}
	header{ position:fixed; width:100%; z-index:101;}
</style>-->
<script>
    $("html").css('background-color','#000').css('position','relative').css('overflow','hidden').css('width','100%').css('height','100%')
    jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        //ysize = $pcnt.height();
        ysize = xsize
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };

  });
  function aa(obj){
    var img = getFullPath(obj);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;
      jcrop_api.setImage(img)
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });
  }
  
function getFullPath(obj){ 
    if(obj) 
    { 
        //ie 
        if (window.navigator.userAgent.indexOf("MSIE")>=1) 
        { 
            obj.select(); 
            return document.selection.createRange().text; 
        } 
        //firefox 
        else if(window.navigator.userAgent.indexOf("Firefox")>=1) 
        { 
            if(obj.files) 
            { 
                return obj.files.item(0).getAsDataURL(); 
            } 
            return obj.value; 
        } 
        return obj.value; 
    } 
} 

</script>
</head>
<body style="background-color:#000;position:relative;width:100%;height:100%;overflow: hidden;">
<!--    <header style="position:fixed; width:100%; z-index:101;">
        <div class="search fl"><img src="<{$res_url}>/images/wap/icon1.png" width="20"></div>
        <div class="logo">裁图</div>
    </header>-->

<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">


    <img src="<{$res_url}>/images/wap/pic7.jpg" id="target" alt="[Jcrop Example]" style="width:100%" />
<br/>
  <div id="preview-pane">
    <div class="preview-container">
      <img src="<{$res_url}>/images/wap/pic7.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>


</div>

<div class="clearfix"></div>

</div>
</div>
</div>
<form method="post" action="amember-opinions_tag.html" enctype="multipart/form-data">  
<div class="">上传<input type="file" name="file" id="upload_file" onchange="$('#target').attr('src',this.value)"></div>
<div class="the_next">
    <input type="hidden" name="top">
    <input type="hidden" name="left">
    <input type="hidden" name="width">
    <input type="hidden" name="height">
    <a href="javascript:$('form').submit();">下一步</a></div>
</form>
    